<template>
  <div class="Line-pie-container">
    <el-card>
      <div id="LineUnitePie" :style="{width: width, height: height}"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: 'LineUnitePie',
  props:{
    height:{
      type: String,
      default: '200px'
    },
    width:{
      type: String,
      default: '200px'
    }
  },
  data(){
    return{

    }
  },
  mounted () {
    this.$nextTick(() =>{
      this.initCharts()
    })
  },
  methods:{
     initCharts(){
       const charts = echarts.init(document.getElementById('LineUnitePie'))
       const option = {
         legend: {},
         tooltip: {
           trigger: 'axis',
           showContent: false
         },
         dataset: {
           source: [
             ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
             ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
             ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
             ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
             ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
           ]
         },
         xAxis: { type: 'category' },
         yAxis: { gridIndex: 0 },
         grid: { top: '55%' },
         series: [
           {
             type: 'line',
             smooth: true,
             seriesLayoutBy: 'row',
             emphasis: { focus: 'series' }
           },
           {
             type: 'line',
             smooth: true,
             seriesLayoutBy: 'row',
             emphasis: { focus: 'series' }
           },
           {
             type: 'line',
             smooth: true,
             seriesLayoutBy: 'row',
             emphasis: { focus: 'series' }
           },
           {
             type: 'line',
             smooth: true,
             seriesLayoutBy: 'row',
             emphasis: { focus: 'series' }
           },
           {
             type: 'pie',
             id: 'pie',
             radius: '30%',
             center: ['50%', '25%'],
             emphasis: {
               focus: 'self'
             },
             label: {
               formatter: '{b}: {@2014} ({d}%)'
             },
             encode: {
               itemName: 'product',
               value: '2014',
               tooltip: '2014'
             }
           }
         ]
       };
       charts.setOption(option);
     },
  }
}
</script>

<style lang="scss" scoped>

</style>
